<template>
  <div class="table-box card">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="datas"
      :data-callback="dataCallback"
      :init-param="initParam"
      :pagination="false"
      :request-api="getUserList"
      :selection="true"
      :toolButton="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <div class="header-button-lf">
          <el-button type="primary" @click="add">新增</el-button>

        </div>
      </template>
      <!-- 自定义内容 限定模板名称 -->
      <template #one="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.one }}</span>
        <el-input v-else v-model="scope.row.one" placeholder="请输入" size="small" style="width: 100%">
        </el-input>
      </template>

      <!-- 自定义内容 线索池上限 -->
      <template #two="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.one }}</span>
        <div v-else>
          <el-input v-model="scope.row.one" placeholder="请输入" size="small" style="width: 70%;margin-right: 8px">
          </el-input>
          天
        </div>
      </template>

      <!-- 自定义内容 线索池领取时间 -->
      <template #three="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.one }}</span>
        <div v-else>
          <el-time-picker
            v-model="scope.row.three"
            end-placeholder="结束时间"
            is-range
            range-separator="至"
            size="small"
            start-placeholder="开始时间"
            style="width: 100%"
          />
        </div>
      </template>

      <!-- 自定义内容 线索池领取间隔 -->
      <template #four="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.four }}</span>
        <div v-else>
          <el-input v-model="scope.row.four" placeholder="请输入" size="small" style="width: 70%;margin-right: 8px">
          </el-input>
          <span style="font-size: 12px;color: #A8ABB2;">分钟</span>
        </div>
      </template>

      <!-- 自定义内容 公海资源上限 -->
      <template #five="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.five || '--' }} </span>
        <div v-else>
          <el-input v-model="scope.row.five" placeholder="Select" size="small" style="width: 70%;margin-right: 8px">
          </el-input>
          天
        </div>
      </template>

      <!-- 自定义内容 公海资源领取时间 -->
      <template #six="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.six }}</span>
        <div v-else>
          <el-time-picker
            v-model="scope.row.six"
            end-placeholder="结束时间"
            is-range
            range-separator="至"
            size="small"
            start-placeholder="开始时间"
            style="width: 100%"
          />
        </div>
      </template>

      <!-- 自定义内容 公海资源领取间隔 -->
      <template #seven="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.seven }}</span>
        <div v-else>
          <el-input v-model="scope.row.seven" placeholder="请输入" size="small" style="width: 70%;margin-right: 8px">
          </el-input>
          <span style="font-size: 12px;color: #A8ABB2;">分钟</span>
        </div>
      </template>

      <!-- 自定义内容 挽救库上限 -->
      <template #eight="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.eight || '--' }} </span>
        <div v-else>
          <el-input v-model="scope.row.eight" placeholder="请输入" size="small" style="width: 70%;margin-right: 8px">
          </el-input>
          天
        </div>
      </template>

      <!-- 自定义内容 挽救库领取时间 -->
      <template #nine="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.nine }}</span>
        <div v-else>
          <el-time-picker
            v-model="scope.row.nine"
            end-placeholder="结束时间"
            is-range
            range-separator="至"
            size="small"
            start-placeholder="开始时间"
            style="width: 100%"
          />
        </div>
      </template>

      <!-- 自定义内容 挽救库领取间隔 -->
      <template #ten="scope">
        <span v-if="!scope.row.edit"> {{ scope.row.ten }}</span>
        <div v-else>
          <el-input v-model="scope.row.ten" placeholder="请输入" size="small" style="width: 70%;margin-right: 8px">
          </el-input>
          <span style="font-size: 12px;color: #A8ABB2;">分钟</span>
        </div>
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <span v-if="!scope.row.edit" style="color: #3370FF;margin-right: 12px" @click="scope.row.edit=true">编辑</span>
        <span v-else style="color: #3370FF;margin-right: 12px" @click="scope.row.edit=false">保存</span>
        <span style="color: #FF0000" @click="deleteAccount(scope.row,scope.$index)">删除</span>
      </template>
    </ProTable>

  </div>
</template>

<script lang="tsx" setup>

import {deleteUser, getUserList} from "@/api/modules/user";
import ProTable from "@/components/ProTable/index.vue";
import {reactive, ref} from "vue";
import {ColumnProps, ProTableInstance} from "@/components/ProTable/interface";
import {User} from "@/api/interface";
// 添加
const add = () => {
  datas.value.push({
    edit: true,
    one: '',
    two: '',
    three: '',
    four: ''
  })
}
// 测试数据
const datas = ref(
  [{
    id: 1,
    one: 2,
    two: 3,
    three: 4,
    four: 5
  }]
)
// 客户级别
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

// ProTable 实例
const proTable = ref<ProTableInstance>();
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  {
    prop: "one",
    label: "限定模板名称",
    minWidth: 156
  },
  {
    prop: "two",
    label: "线索池上限",
    minWidth: 102
  },
  {
    prop: "three",
    label: "线索池领取时间",
    minWidth: 208
  },
  {
    prop: "four",
    label: "线索池领取间隔",
    minWidth: 128
  },
  {
    prop: "five",
    label: "公海资源上限",
    minWidth: 107
  },
  {
    prop: "six",
    label: "公海资源领取时间",
    minWidth: 208
  },
  {
    prop: "seven",
    label: "公海资源领取间隔",
    minWidth: 134
  },
  {
    prop: "eight",
    label: "挽救库上限",
    minWidth: 102
  },
  {
    prop: "nine",
    label: "挽救库领取时间",
    minWidth: 208
  },
  {
    prop: "ten",
    label: "挽救库领取间隔",
    minWidth: 128
  },

  {prop: "operation", label: "操作", fixed: "right", width: 108}
]);

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total
  };
};

// 删除
const deleteAccount = (params, index) => {
  if (params.id) {
    proTable.value?.batchDelete(deleteUser, `是否删除【${params.username}】用户`, params.id);
  } else {
    console.log(index)
    datas.value.splice(index, 1);
  }

};


</script>

<style lang="scss" scoped>

</style>
